<% layout('/layouts/default.html', {title: '任务宝活动管理', libs: ['dataGrid']}){ %>
<style>
	.black_overlay{
		display: none;
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index:111001;
		-moz-opacity: 0.8;
		opacity:.80;
		filter: alpha(opacity=80);
	}
	.white_content {
		display: none;
		position: absolute;
		top: 5%;
		left: 5%;
		width: 80%;
		height: 60%;
		border: 16px solid lightblue;
		background-color: white;
		z-index:111002;
		overflow: auto;
	}
	.jqgfirstrow{
		display:none;
	}
	.ui-corner-top{
		display:none;
	}
	.jqgrid-rownum{
		display:none;
	}

	.mobile-activity-div {
		float:left;margin-left:15px;
	}

	.mobile-activity-div > span {
		display: block;
		font-size: 14px;
		margin-top:15px;
	}


	.ui-widget-content {
		 border: 0px ;
		background: #fff;
	}

	.ui-jqgrid tr.jqgrow td {
		font-weight: normal;
		overflow: hidden;
		height: 30px;
		height: 29px\9;
		padding: 3px 6px;
		white-space: nowrap;
		text-overflow: ellipsis;
		border-bottom-width: 1px;
		border-bottom-color: inherit;
		border-bottom-style: none;
	}


	.ui-jqgrid tr.ui-row-ltr td{text-align:left;border-right-width:0px;border-right-color:inherit;border-right-style:solid}

	.img-gray {
		-webkit-filter: grayscale(100%);
		-webkit-filter: grayscale(1);
		filter: grayscale(100%);
		filter: gray;
	}

	.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
		background: #FFFFFF;
	}

    .ui-jqgrid tr.ui-state-highlight.ui-row-ltr td {
        background-color: #FFFFFF;
    }
    a:active {color: red !important}
    a:hover{color: red !important}
</style>
<div class="main-content">
	<div class="box box-main">
		<div class="box-header">
			<div class="box-title">
				<i class="fa fa-list-alt"></i> ${text('任务宝活动管理')}
			</div>
			<div class="box-tools pull-right">
				<a href="#" class="btn btn-default" id="btnSearch" title="${text('查询')}"><i class="fa fa-filter"></i> ${text('查询')}</a>
				<% if(hasPermi('wxrobot:taskActivity:edit')){ %>
				<a href="javascript:window.open('${ctx}/wxrobot/taskActivity/form')" class="btn btn-default btnTool" title="${text('新增任务宝活动')}"><i class="fa fa-plus"></i> ${text('新增')}</a>
				<% } %>
			</div>
		</div>
		<div class="box-body">
			<#form:form id="searchForm" model="${taskActivity}" action="${ctx}/wxrobot/taskActivity/listData" method="post" class="form-inline hide"
			data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
			<div class="form-group">
				<label class="control-label">${text('活动名称')}：</label>
				<div class="control-inline">
					<#form:input path="name" maxlength="200" class="form-control width-120"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label">${text('助力人数')}：</label>
				<div class="control-inline">
					<#form:input path="helps" maxlength="4" class="form-control width-120"/>
				</div>
			</div>
			<div class="form-group">
				<button type="submit" class="btn btn-primary btn-sm">${text('查询')}</button>
				<button type="reset" class="btn btn-default btn-sm">${text('重置')}</button>
			</div>
		</#form:form>
		<table id="dataGrid"></table>
		<div id="dataGridPage"></div>
	</div>
</div>
</div>

<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay">
</div>
<div id="QRDiv" class="white_content">
	<div style="text-align: right; cursor: default; height: 40px;" id="move">
		<span style="font-size: 16px;" onclick="CloseQRDiv()">关闭</span>
	</div>
	<img id="qrImg" src="" width="95%" height="85%">
</div>
<% } %>
<script>
    // 初始化DataGrid对象
    $('#dataGrid').dataGrid({
        searchForm: $("#searchForm"),
        columnModel: [
            {header:'${text('活动名称')}', name:'name', index:'a.name', width:300, align:"left", frozen:true, formatter: function(val, obj, row, act){
                    var actions = [];
                    var imggray = "";
                    //处于草稿状态\离线状态的活动(发布，删除)
                    if(row.status == '4' || row.status == '6'){
                        actions.push('<a href="${ctx}/wxrobot/taskActivity/enable?id='+row.id+'" class="btnList" class="btn btn-default" title="${text('发布活动')}" data-confirm="${text('确认要发布该活动吗？')}" style="color:green"><i class="fa fa-fw fa-check"></i>发布</a>&nbsp;&nbsp;&nbsp;&nbsp;');
                        actions.push('<a href="${ctx}/wxrobot/taskActivity/delete?id='+row.id+'" class="btnList" class="btn btn-default" title="${text('删除活动')}" data-confirm="${text('确认要删除该活动吗？')}" style="color:red"><i class="fa fa-fw fa-close"></i>删除</a>');
                        imggray="img-gray";
                        //运行中的活动(停用)
                    }else if(row.status == '5'){
                        actions.push('<a href="${ctx}/wxrobot/taskActivity/disable?id='+row.id+'" class="btnList" class="btn btn-default"  title="${text('停用活动')}" data-confirm="${text('确认要停用该活动吗？')}" style="color:red"><i class="fa fa-fw fa-ban"></i>停用</a>');
                        //处于离线状态的活动（发布，删除）
                    }

                    var robotPosterHref = "";
                    if(row.robotPoster != "" && row.robotPoster!=null){
                        robotPosterHref = "<span><a href='"+row.robotPoster+"'>机器人海报下载<i class='fa fa-fw fa-level-down'></i></a></span>";
					}

                    return '<div style="margin-top:5px;border-bottom:1px solid #ccc">\n' +
                        '\t<div style="float:left;">\n' +
                        '\t\t<div style="margin-top:5px;"><img src="'+row.poster+'" width="120px" height="170px" class="'+imggray+'"/>\n</div>' +
                        '\t</div>\n' +
                        '\t<div class="mobile-activity-div">\n' +
						'<span style="margin-top:6px;">活动名：<a href="javascript:window.open(\'${ctx}/wxrobot/taskActivity/form?id='+row.id+'\')" class="btnList" >'+val+'</a></span>'+
                        robotPosterHref+
                        '\t\t<span><a href="javascript:window.open(\'${ctx}/wxrobot/customer/activityCustomerList?activityId='+row.id+'\')">裂变信息</a></span><br/>\n' +
                        '\t\t<span style="margin-top:26px;">'+actions.join('')+'</span><br/>\n' +
						'\t</div>\n' +
                        '</div>';
                }}
        ],
        // 加载成功后执行事件
        ajaxSuccess: function(data){

        }
    });

    //弹出隐藏层
    function ShowQRDiv(imgpath) {
        $("#qrImg").attr("src", "/" + imgpath);
        document.getElementById("QRDiv").style.display = 'block';
        document.getElementById("fade").style.display = 'block';
        var bgdiv = document.getElementById("fade");
        bgdiv.style.width = document.body.scrollWidth;
        $("#fade").height($(document).height());
    }
    //关闭弹出层
    function CloseQRDiv()
    {
        document.getElementById("QRDiv").style.display='none';
        document.getElementById("fade").style.display='none';
    };

    function getHostUrl() {
        var host = window.location.host;
        //获取主机地址之后的目录，如： test/test/test.htm
        //var pathName = window.document.location.pathname;
        //var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
        //var rootPath = host + projectName;
        return host;
    }


    var stest = function () {
        // 初始化一个 WebSocket 对象
        var ws = new WebSocket("ws://" + getHostUrl() + "/qrCodeHandler");
       // var ws = new WebSocket("ws://39.106.62.79:8303/qrCodeHandler");
        // 建立 web socket 连接成功触发事件
        ws.onopen = function () {
            // 使用 send() 方法发送数据
            //  ws.send("发送数据");
        };

        // 接收服务端数据时触发事件
        ws.onmessage = function (evt) {
            var received_msg = evt.data;
            if (received_msg == "startSuccess") {
                CloseQRDiv();
            } else {
                ShowQRDiv(received_msg);
                $("#page-loading", parent.document).hide();
            }
        };

        // 断开 web socket 连接成功触发事件
        ws.onclose = function () {
            // alert("连接已关闭...");
        };
    }
    stest();
</script>